<!-- 基本信息 -->
<template>
  <el-form
    ref="basicInformationForm"
    :model="basicInformationForm"
    :rules="rules"
    label-width="93px"
    :hide-required-asterisk="true"
  >
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-container>
        <el-aside width="70%">
          <el-row style="margin-left: 20px">
            <el-col :span="12">
              <el-form-item
                label="预案类型"
                prop="PlanType"
                :rules="[
                  {
                    required: true,
                    message: '预案类型不能为空',
                    trigger: 'blur',
                  },
                ]"
              >
                <span class="IsMust">*</span>
                <!-- <el-input v-model="form.PlanType" placeholder="请输入预案类型" /> -->
                <el-select
                :disabled="titleDisabled"
                  v-model="basicInformationForm.PlanType"
                  placeholder="请选择预案类型"
                  style="width: 77%; margin-left: 10px"
                >
                  <el-option
                    v-for="item in PlanTypeDropdownBox"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="预案名称"
                prop="PlanName"
                :rules="[
                  {
                    required: true,
                    message: '请输入预案名称',
                    trigger: 'blur',
                  },
                  {
                    validator: (rule, value, callback) =>
                      this.checkPlanNameUnique(rule, value, callback),
                    trigger: 'blur',
                  },
                ]"
              >
                <span class="IsMust">*</span>
                <el-input
                :disabled="titleDisabled"
                  v-model="basicInformationForm.PlanName"
                  placeholder="请输入预案名称"
                  style="width: 77%; margin-left: 10px"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="margin-left: 20px">
            <el-col :span="12">
              <el-form-item label="响应等级" prop="ResponseLevel">
                <el-select
                :disabled="titleDisabled"
                  v-model="basicInformationForm.ResponseLevel"
                  placeholder="请选择响应等级"
                  @change="updateGradeName"
                  style="width: 77%; margin-left: 10px"
                >
                  <el-option
                    v-for="item in Responselevellist"
                    :key="item.grade"
                    :label="item.grade"
                    :value="item.grade"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="等级名称" prop="GradeName">
                <el-input
                  disabled
                  v-model="basicInformationForm.GradeName"
                  placeholder="请输入等级名称"
                  style="width: 77%; margin-left: 10px"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <el-form-item label="适用范围" prop="ApplicableScope" class="Appls">
            <el-input
            :disabled="titleDisabled"
              style="width: 77%;height: 83px;"
              v-model="basicInformationForm.ApplicableScope"
              placeholder="请输入适用范围"
            />
          </el-form-item>
        </el-main>
      </el-container>
    </el-card>
  </el-form>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// import {
//   getLists,
//   insertData,
//   deletelist,
//   ModifierList,
// } from "../../../api/Genericmethods/GeneralQuery";
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: {},
  props: ["basicInformationForm","title"],
  data() {
    return {
      // 响应等级下拉框
      Responselevellist: [
        {
          grade: "III级",
          name: "班组级",
        },
        {
          grade: "II级",
          name: "公司级",
        },
        {
          grade: "I级",
          name: "社会级",
        },
      ],
      // 预案类型下拉框
      PlanTypeDropdownBox: ["现场处置方案", "专项应急预案", "综合应急预案"],
      // 表单参数
      // basicInformationForm: {
      //   PlanName: "预案名称", //预案名称
      //   PlanType: "预案类型", //预案类型
      //   ApplicableScope: "适用范围", //适用范围
      //   ResponseLevel: "响应等级", //响应等级
      //   GradeName: "等级名称", //等级名称
      // },
      rules: {
        PlanName: [
          { required: true, message: "请输入预案名称", trigger: "blur" },
          { validator: this.checkPlanNameUnique, trigger: "blur" },
        ],
        PlanType: [
          { required: true, message: "预案类型不能为空", trigger: "blur" },
        ],
        postSort: [
          { required: true, message: "岗位顺序不能为空", trigger: "blur" },
        ],
      },
    };
  },
  // 计算属性 类似于data概念
  computed: {
     // 标题
    titleDisabled() {
      return this.title === "详情"; // 判断标题是否为"详情"
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 响应等级
    updateGradeName() {
      const selectedGrade = this.basicInformationForm.ResponseLevel;
      const selectedLevel = this.Responselevellist.find(
        (item) => item.grade === selectedGrade
      );
      // console.log(this.form.AccidentType);
      this.basicInformationForm.GradeName = selectedLevel
        ? selectedLevel.name
        : "";
    },
    // 校验
    checkPlanNameUnique(rule, value, callback) {
      for (const item of this.$route.query.data) {
        if (value === item.PlanName) {
          this.$message.error("预案名称已存在");
        } else {
          callback();
        }
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  text-align: left;
}
.IsMust {
  position: absolute;
  color: #f56c6c;
  // 位置可以根据自己的样式自行调整
  top: -4px;
  left: -35px;
}
::v-deep  aside {
    background: #eef1f600;
    margin-bottom:0px;
}
.Appls ::v-deep .el-input--medium .el-input__inner {
    height: 100%;
}
.Appls ::v-deep .el-input--medium .el-input__inner,
.Appls >>> .el-input--medium .el-input__inner {
  height: 100%;
}
</style>
